<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<script type="text/javascript" src="./move.js"></script>
<title></title>
<style>
*{
	padding:0;
	margin:0;
	list-style: none;
}
body{
  position: relative;
}
.play{
  position: relative;
	width:480px;
	height:420px;
	background:#666;
	margin:0 auto;
	margin-top:50px;
	overflow: hidden;
}
.c_top{
	width:480px;
	height:300px;
	position: relative;
}
.c_top li{
	width:480px;
	height:300px;
	position: absolute;
	overflow: hidden;
}
.c_bottom ul{
	width:480px;
	height:140px;
	background:#666;
	position:relative;
	overflow: hidden;
}
.c_bottom ul li{
	width:133px;
	height:120px;
   padding:20px 0 0 20px;
	float:left;
	filter:alpha(opacity:40);
	opacity:0.4;
}
.c_bottom li img{
	width:100%;
}
.first{
	width:50px;
	height:50px;
	position: absolute;
	background:url(./film/ljt.png) no-repeat;
	filter:alpha(opacity:0);
	opacity: 0;
	z-index:3001;
	top:120px;
	left:10px;
}
.second{
	width:50px;
	height:50px;
	position: absolute;
	background:url(./film/rjt.png) no-repeat;
	top:120px;
	z-index:3001;
	right:10px;
	filter:alpha(opacity:0);
	opacity: 0;
	
}
.left{
	width:200px;
	height:250px;
	background:black;
	filter:alpha(opacity:0);
	z-index: 3000;
	opacity: 0;
	left:0;
	position:absolute;
}
.right{
	width:200px;
	height:250px;
	background:purple;
	filter:alpha(opacity:0);
	opacity:0;
	z-index: 3000;
	right:0;
	position:absolute;
}
</style>
</head>
<script type="text/javascript">
function getByClass(oParent,sclass,mark)
{
	
	var aEle=oParent.getElementsByTagName(mark);
	var aResult=[];
	for(var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sclass)
		{
			aResult.push(aEle[i]);
		}
		
	}
	return aResult;
		
};

window.onload=function (){

	     var nowIndex=2;
		    var oDiv=document.getElementById('count');
		    var oDiv1=document.getElementById('small');
        var oFirst=getByClass(oDiv,'first','div')[0];
        var oSecond=getByClass(oDiv, 'second','div')[0];
        var oLeft=getByClass(oDiv, 'left','a')[0];
        var oRight=getByClass(oDiv, 'right','a')[0];
        var oBigimg=getByClass(oDiv,'bigimg','div')[0];
        var aul=oDiv1.getElementsByTagName('ul')[0];
		    var ali1=oBigimg.getElementsByTagName('li');
        var ali2=oDiv1.getElementsByTagName('li');
        var now=0;
        change(ali2[0],{opacity:100});
    function sovle()
		{
  	          for(var i=0;i<ali2.length;i++)
             	{
             		change(ali2[i],{opacity:40});
             	}
             	change(ali2[now],{opacity:100});
             	ali1[now].style.zIndex=nowIndex++;
             	ali1[now].style.height=0;
             	change(ali1[now],{height:300});

              if(now==0)
              {
              	change(aul,{left:0});
              }
            else if(now==ali2.length-1)
             {
               change(aul,{left:-(now-2)*ali2[0].offsetWidth});
             }
            else
           	 {
            	change(aul,{left:-(now-1)*ali2[0].offsetWidth});
          	 }

         };
        aul.style.width=(ali2.length)*ali2[0].offsetWidth+'px';
        for(var i=0;i<ali2.length;i++)
        {        ali2[i].index=i;
             ali2[i].onclick=function (){
             	if(this.index==now)
             	return;
                now=this.index;
                
                for(var i=0;i<ali2.length;i++)
             	{
             		change(ali2[i],{opacity:40});
             	}
             	change(ali2[now],{opacity:100});
             	ali1[this.index].style.zIndex=nowIndex++;
             	ali1[this.index].style.height=0;
             	change(ali1[this.index],{height:300});
             };
            ali2[i].onmouseover=function (){
        	change(this,{opacity:100});
              }
        ali2[i].onmouseout=function (){
        	if(now!=this.index) 
        	{
        		change(this,{opacity:40});
            }
           }
        }
       oFirst.onmouseover=oLeft.onmouseover=function (){
        	 change(oFirst,{opacity:100});
        };
		oFirst.onmouseout=oLeft.onmouseout=function (){
        	   
        	 change(oFirst,{opacity:0});
        };
		oRight.onmouseover=oSecond.onmouseover=function (){
        	   
        	 change(oSecond,{opacity:100});
        };
		oRight.onmouseout=oSecond.onmouseout=function (){
        	  
        	 change(oSecond,{opacity:0});
        };
       
       oFirst.onclick=function ()
        {
            
             if(now==0)
             {
             	now=ali1.length;
             }
              now--;
            sovle();
             /*for(var i=0;i<ali2.length;i++)
             	{
             		change(ali2[i],'opacity',40);
             	}
             	change(ali2[now],'opacity',100);
             	ali1[now].style.zIndex=nowIndex++;
             	ali1[now].style.height=0;
             	change(ali1[now],'height',300);

              if(now==0)
              {
              	change(aul,'left',0);
              }
            else if(now==ali2.length-1)
             {
               change(aul,'left',-(now-2)*ali2[0].offsetWidth);
             }
            else
           	 {
            	change(aul,'left',-(now-1)*ali2[0].offsetWidth);
          	 }*/

        }
        

       

         oSecond.onclick=function ()
        {
             now++;
             if(now==ali1.length)
             {
             	now=0;
             }
             sovle();
             /*for(var i=0;i<ali2.length;i++)
             	{
             		change(ali2[i],'opacity',40);
             	}
             	change(ali2[now],'opacity',100);
             	ali1[now].style.zIndex=nowIndex++;
             	ali1[now].style.height=0;
             	change(ali1[now],'height',300);

              if(now==0)
              {
              	change(aul,'left',0);
              }
            else if(now==ali2.length-1)
             {
               change(aul,'left',-(now-2)*ali2[0].offsetWidth);
             }
            else
           	 {
            	change(aul,'left',-(now-1)*ali2[0].offsetWidth);
          	 }*/

        }

        
	};
</script>
<body>
<div class="play" id="pimg">
<ul class="c_top" id="count" >
<div class="first"></div>
<div class="second"></div>
<a class="left" src="javascript:;"></a>
<a class="right" src="javascript:;"></a>
<div class="bigimg" id="big">
<li style="z-index:1;"><img src="./film/fj1.jpg" /></li>
<li><img src="./film/fj2.jpg" /></li>
<li><img src="./film/fj3.jpg" /></li>
<li><img src="./film/fj4.jpg"/></li>
<li><img src="./film/fj5.jpg"/></li>
</div>
</ul>
<div class="c_bottom" id="small">
<ul style="left:0px;">
<li><img src="./film/fj1.jpg" style="opacity: 1;filter: alpha(opacity:100);"/></li>
<li><img src="./film/fj2.jpg"/></li>
<li><img src="./film/fj3.jpg"/></li>
<li><img src="./film/fj4.jpg" /></li>
<li><img src="./film/fj5.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>
